<!-- 
      list.html
      搜索出来的列表页  id=list
      
      Created by tang on 2017-03-10.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/list.css" />
    <style type="text/css">
    	.mui-backdrop{
    		display: none;
    	}
    </style>
</head>

<body class="white ">
	<header class="mui-bar mui-bar-transparent inf">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back"><span></span></a>
	    <a class="mui-icon mui-pull-right bexta-icon bexta-icon-setSearch"><span></span></a>
	    <!--<a class="mui-icon mui-pull-right bexta-icon bexta-icon-maps"><span></span></a>-->
	</header>
	<div class="mui-content mui-scroll-wrapper " id="onescroll"> 
		<div id="ner" class="mui-scroll loading">
			<div class="setSearchBtn">
		   	 	<img src="../img/actor.png" class="maximg" alt="" />
		   	 	<div class="search-result">
		   	 		<h3>搜索结果</h3>
		   	 		<div>为您找到超过{{}msg.count}件演员</div>
		   	 	</div>
		   	 	<div class="control-btn">
		   	 		<!--<img src="../icon/icon_ditu-youquan-@2x.png" alt="" class="link" _id="maps" _title="附近的人" _href="map.html" />-->
		   	 		<img src="../icon/icon_saixuan-youquan@2x.png"  class="link" _id="actorSearch" _title="选演员" _href="actorSearch.html" :_extras="'type='+commend_id" _aniShow="slide-in-left"  />
		   	 	</div>
			</div>
			<div class="search-list">
			<div class="title">
				<p>排序</p>
				<p><a  id="search-title-text" ><span>推荐排序</span> <img src="../icon/icon_xialajiantou@2x.png"  alt="" /></a></p>
				<div id="topPopover" class="mui-popover" >
					<div class="mui-popover-arrow"></div>
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="popover-content">
								<div v-bind:class="sort==1?'active':''" data-type="1"><span>推荐排序</span></div>
								<div v-bind:class="sort==2?'active':''" data-type="2"><span>价格从低到高</span></div>
								<div v-bind:class="sort==3?'active':''" data-type="3"><span>价格从高到低</span></div>
								<div v-bind:class="sort==4?'active':''" data-type="4"><span>最新上架</span></div>
								<div v-bind:class="sort==5?'active':''" data-type="5"><span>评分等级</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="list-item-box">
				<template v-for="(item,index) in msg.list">
					<div class="item link actor" _id="detail" _href="detail.html" _extras="pid=12" >
						<div class="collect" :data-idx="index" :data-id="item.id" v-bind:class="item.is_collect==1?'active':''"></div>
						<img src="../icon/mask-big.jpg" :data-load="item.img" alt="" class="link" _id="detail" _href="detail.html" :_extras="'pid='+item.id" />
						<div class="item-name mui-clearfix">
							<div class="mui-clearfix actor-name">
								<div class="mui-pull-right">
									青年 男  国内 180-185cm 25-30岁
								</div>
								{{item.name}}
							</div>
							<div class="mui-clearfix actor-fen">
								<div class="mui-pull-right">
									<span>舞蹈</span>
									<span>舞蹈</span>
									<span>舞蹈</span>
								</div>
								<div class="score mui-clearfix" style="margin-top: 4px;">
									<div class="score_star mui-pull-left" :data-cover="item.grade">
									</div>
									<div class="mui-pull-left score_comment">
										{{item.count_discuss}}条评论
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</div>
			
		</div>
		</div>
	</div>
	
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script> 
<script type="text/javascript">
	var apps;
	mui.init();
	mui.plusReady(function () {
		var view = bexta.getWebview();
		var sendData = view.sendData || {};
		sendData['firstrow'] = 0;
		sendData['listrow'] = 3;
		sendData['sort'] = 1;
		sendData['commend_id'] = sendData['commend_id'] || view.type;
		var user = bexta.getStorage('bexta_user');
		if( user && user != '' ){
			sendData['uid'] = user.uid;
		}
		bexta.ajax(api.search_result, function(res){
			initVue(res,sendData);
		},{data:sendData});
	});
	function initVue(datas, sendDatas){
		apps = new Vue({
			el:'#onescroll',
			data:{
				sort:1,
				commend_id:sendDatas.commend_id,
				activePullToRefresh:false,
				firstrow:sendDatas.firstrow,
				listrow:sendDatas.listrow,
				msg:datas
			},
			mounted:function(){
//				initEvent();
//				initMounted();
			},
			updated:function(){
				mui('.score_star').score({
					eventstar:false, 
					fullStar:"../icon/icon_xingxing@2x.png",
					halfStar:"../icon/icon_bankexin@2x.png",
					voidStar:"../icon/icon_void@2x.png"
				});
				bexta.imageLoad('[data-load]');
			}
		});
	}
	
	//选择筛选
	 mui.ready(function () {
	   	mui('.popover-content').on('tap', 'div', function() {
			mui('.popover-content div').each(function(){
				this.classList.remove('active');
			})
			this.classList.add('active');
			D('#search-title-text span').dom[0].innerText = this.innerText;
			mui('.mui-popover').popover('hide',document.getElementById("search-title-text"));  //关闭
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			D('#search-title-text img').dom[0].classList.remove('run')
		});
		mui('body').on('tap', '#search-title-text', function(){
			mui('.mui-popover').popover('toggle',document.getElementById("search-title-text"));
			var img = this.querySelector('img');
			if( img.classList.contains('run') ){
				img.classList.remove('remove');
			}else{
				img.classList.add('run');
			}
		});
	 });
	
	//---
	
	;(function($) {
		var deceleration = mui.os.ios?0.003:0.0009;
		var scroll = $('#onescroll.mui-scroll-wrapper').scroll({
			bounce: false,
			indicators: true, //	是否显示滚动条
			deceleration:deceleration
		});
		//滚动头部实时改变按钮
	   	mui('.mui-bar-transparent').transparent2({
	   		scroll:scroll,
	   		offset:100,
	   		success:function(obj, opa){
				document.querySelector('.bexta-icon-setSearch').style.opacity = opa;
//				document.querySelector('.bexta-icon-maps').style.opacity = opa;
	   			D('.control-btn img').each(function(){
	   				this.style.opacity = 1-opa;
	   			});
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			} 
	   		}
	   	});
		mui('#ner.mui-scroll').pullToRefresh({
			up: {
				callback: function() {
					var self = this;
					self.endPullUpToRefresh();
					console.log(111);
				}
			}
		});
	})(mui)
	
</script>
</body>
</html>